<template>
    <div class='box'>
        <!-- tab栏 -->
        <van-tabs v-model="active">
            <van-tab title="全部"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待确认"></van-tab>
            <van-tab title="代发货"></van-tab>
        </van-tabs>
        <!-- 订单列表 -->
        <div class="order">
            <div class="list"
                v-for="(item,index) in data.list" :key="index">
                <p>
                    <span>
                        订单时间:{{item.createTime}}
                    </span>
                    <span>
                        {{item.orderStatusString}}
                    </span>
                </p>
                <van-card
                v-for="(ite,ind) in item.newBeeMallOrderItemVOS" :key="ind"
                :num="ite.goodsCount"
                :price="ite.sellingPrice"
                desc="全场包邮"
                :v-model="ite.goodsName"
                :thumb="ite.goodsCoverImg"
                />
            </div>     
        </div> 
      <div class="top">
        <b class="left">
          <van-icon name="arrow-left" @click="goBack"/>
        </b> 
        <div class="search">
            生成订单
        </div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div>
    </div>
</template>

<script>
import { useRouter } from "vue-router";
import api from "../http/api.js";
import { ref, reactive, onMounted } from "vue";
export default {
  setup(props) {
    const active = ref(0);
    const router = useRouter();
    const data = reactive({
      list: []
    });
    // 返回首页
    const goBack = () => {
      store.commit("setTab", { act: 3, isShow: true });
      router.push("/user");
    };
    const getlist = async () => {
      let obj = {
        pageNumber: 1,
        status: ""
      };
      let res = await api.orderList(obj);
      data.list.push(...res.data.data.list);
      console.log(res.data.data.list, "获取订单列表");
    };
    onMounted(() => {
      getlist();
    });
    return {
      active,
      router,
      goBack,
      getlist,
      data
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  padding-top: 200px;
  .order {
    .list {
      width: 100%;
      p {
        padding: 0 20px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .van-card {
        text-align: left;
      }
    }
  }
  .van-tabs {
    width: 100%;
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 999;
  }
  .top {
    width: 100%;
    height: 100px;
    background: #fff;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
}
</style>
